<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const isDialogVisible = ref(false);
const currentMessage = ref('');
const messageIndex = ref(0);

// 预定义的助手消息列表
const assistantMessages = [
  '你好！我是你的智能助手，有什么可以帮到你的吗？',
  '需要了解学习路径吗？试试查看我们的课程分类！',
  '遇到问题了吗？可以在社区中寻求帮助哦！',
  '今天学习了吗？坚持每天进步一点点！',
  '双击我可以进入AI助手界面，获得更多帮助！',
  '记得常来看看，我们每周都有新课程上线！',
  '学习之余别忘了休息，保持好心情才能学得更好！'
];

// 显示对话框并更新消息
const showDialog = () => {
  // 循环显示消息
  currentMessage.value = assistantMessages[messageIndex.value];
  messageIndex.value = (messageIndex.value + 1) % assistantMessages.length;
  isDialogVisible.value = true;
  
  // 3秒后自动关闭对话框
  setTimeout(() => {
    isDialogVisible.value = false;
  }, 3000);
};

// 双击进入AI界面
const goToAIPage = () => {
  // 使用路由导航到AI助手页面
  router.push('/ai-assistant');
};
</script>

<template>
  <div class="assistant-container">
    <!-- 小助手图标 -->
    <div 
      class="assistant-icon" 
      @click="showDialog" 
      @dblclick="goToAIPage"
      :class="{ 'active': isDialogVisible }"
    >
      <img src="/images/ai.jpg" alt="AI助手" class="assistant-image" />
    </div>
    
    <!-- 对话框 -->
    <transition name="fade">
      <div v-if="isDialogVisible" class="message-dialog">
        <div class="dialog-content">
          {{ currentMessage }}
        </div>
        <div class="dialog-arrow"></div>
      </div>
    </transition>
  </div>
</template>

<style scoped>
.assistant-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.assistant-icon {
  cursor: pointer;
  transition: transform 0.3s;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  overflow: hidden; /* 确保图片不会溢出圆形边界 */
}

.assistant-icon:hover {
  transform: scale(1.1);
}

.assistant-icon.active {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(65, 184, 131, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(65, 184, 131, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(65, 184, 131, 0);
  }
}

.assistant-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例并填充容器 */
}

.message-dialog {
  background: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  max-width: 300px;
  position: relative;
}

.dialog-content {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

.dialog-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid white;
  bottom: -10px;
  right: 20px;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(10px);
}
</style> 